<template>
  <div class="detail-wrapper">
    <div class="detail-icon">
      <el-tooltip
        :disabled="!computedNameTooltip"
        effect="dark"
        :content="form.name"
        placement="bottom"
      >
        <h5 class="detail-title" ref="nameRef">{{ form.name }}</h5>
      </el-tooltip>
      <div class="cover" :style="{ backgroundImage: `url(${form.src})` }" />
      <p class="detail-intro">{{ form.createTime }}</p>
      <el-icon class="icon edit" @click="handleEdit">
        <Edit />
      </el-icon>
    </div>
    <el-divider style="margin: 10px 0" />
    <div v-html="valueHtmlRef" class="editor-content-view"></div>
  </div>
</template>
<script setup name="Edit">
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式
import { ref, reactive, inject, onMounted, computed , nextTick} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Edit } from '@element-plus/icons-vue';
import useSymbols from './../../compostions/useSymbols.js';
import { TYPE_NAME_BIAN_QIAN } from '../../util/constant';

const router = useRouter();
const route = useRoute();

const { getMenoDataItem, setVisitItem } = inject(useSymbols);

const form = reactive({
  name: '',
  src: '',
  createTime: '',
});

const nameRef = ref(null);
// 内容 HTML
const valueHtmlRef = ref('');

onMounted(async () => {
  // 有id表示编辑状态
  if (route.query.id) {
    const { name, createTime, src, content } = await getMenoDataItem(
      route.query.id
    );
    // 富文本设置html
    valueHtmlRef.value = content;
    // form赋值
    form.name = name;
    form.src = src;
    form.createTime = createTime;
    await nextTick();
    Prism.highlightAll()
  }
});

// 编辑
const handleEdit = () => {
  setVisitItem(route.query.id, TYPE_NAME_BIAN_QIAN); // 统计方法
  router.push({ path: '/index/memoEdit', query: { id: route.query.id } });
};

// 计算标题的宽度
const computedNameTooltip = computed(() => {
  if (!nameRef || !nameRef.value) return false;
  const nameWidth = nameRef.value.offsetWidth;
  const name = form?.name || '';
  const spanDom = document.createElement('span');
  spanDom.style.fontSize = '22px';
  spanDom.textContent = name;
  // 将span元素添加到文档中（不显示）
  document.body.appendChild(spanDom);
  // 获取宽度
  const width = spanDom.offsetWidth;
  // 移除span元素
  document.body.removeChild(spanDom);
  return width > nameWidth ? true : false;
});
</script>
<style scoped lang="less">
.detail-wrapper {
  --upload-width-height: 114px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #ffffff;
  padding: 0 20px 10px 20px;
  position: relative;

  .detail-intro {
    font-size: 14px;
    line-height: 18px;
    color: #5a5a5a;
  }
  .detail-icon {
    margin-top: 5px;
    width: 100%;
    display: grid;
    grid-template-columns: calc(100% - 200px) 28px 160px 16px;
    align-items: center;
    .detail-title {
      font-size: 22px;
      font-weight: 500;
      color: #555;
      text-align: left;
      margin: 0;
      width: 94%;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: normal;
    }
    .cover {
        width: 22px;
        height: 0;
        padding-bottom: 22px;
        overflow: hidden;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        margin-right: 6px;
    }
    .edit {
      color: var(--system-primary-color);
      cursor: pointer;
      &:hover {
        transform: scale(1.05);
        filter: brightness(0.98);
      }
    }
  }
}
</style>
<style>
.editor-content-view {
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 20px;
  overflow-x: auto;
}

.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap; /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  padding: 3px;
  border-radius: 3px;
}
.editor-content-view pre>code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}
.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}
.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}
</style>